import {createRouter, createWebHistory} from 'vue-router'
import Layout from '../views/layout/Layout.vue'

const routes = [
    {
        path: '/login',
        name: '登录',
        meta: {title: "登录", requireAuth: false}, // 定义meta元数据
        component: () => import('../views/login/Login.vue')  // 视图组件
    },
    {
        path: '/',
        name: '首页',
        component: Layout,
        redirect: '/dashboard',
        children: [
            {
                path: '/dashboard',
                name: '仪表盘',
                icon: 'Monitor',
                //定义meta元数据
                meta: {title: "仪表盘", requireAuth: false},
                component: () => import('../views/dashboard/Dashboard.vue')
            }
        ]
    },
    {
        path: '/server',
        name: '主机管理',
        icon: 'Setting',
        component: Layout,
        children: [
            {
                path: '/idc',
                name: '机房管理',
                meta: {title: "机房管理", requireAuth: false},
                component: () => import('../views/idc/Idc.vue')
            },
            {
                path: '/server_group',
                name: '主机分组',
                meta: {title: "主机分组", requireAuth: false},
                component: () => import('../views/servergroup/ServerGroup.vue')
            },
            {
                path: '/server',
                name: '服务器管理',
                meta: {title: "服务器管理", requireAuth: false},
                component: () => import('../views/server/Server.vue')
            },
        ]
    },
    {
        path: '/sysconfig',
        name: '系统配置',
        icon: 'PieChart',
        component: Layout,
        children: [
            {
                path: '/credential',
                name: '凭据管理',
                meta: {title: "凭据管理", requireAuth: false},
                component: () => import('../views/credential/Credential.vue')
            }
        ]
    },
    // 404
    {
        path: "/:pathMatch(.*)*",
        name: "NotFound",
        meta: {title: "NotFound", requireAuth: false}, // 定义meta元数据
        component: () => import('@/views/error/404.vue'),
    },
]


const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

// 为路由对象，添加 beforeEach 导航守卫
router.beforeEach((to, form, next) => {
    /*
     to 将要访问的路径
     from 代表从那个路径跳转而来
     next 是一个函数，表示放行
        next() 放行   next('/login') 强制跳转
    */

    // 如果用户访问的登录页，直接放行
    if (to.path === '/login') return next()
    // 从 sessionStorage 中获取到 保存的 token 值
    const tokenStr = window.sessionStorage.getItem('token')
    // 没有token，强制跳转到登录页
    if (!tokenStr) return next('/login')
    next()
})


// 抛出路由实例, 在 main.js 中引用
export default router


//导入进度条组件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//递增进度条，这将获取当前状态值并添加0.2直到状态为0.994
NProgress.inc(100)
//easing 动画字符串
// speed 动画速度
// showSpinner 进度环显示隐藏
NProgress.configure({easing: 'ease', speed: 600, showSpinner: false})
//router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些
// 页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。
// to 要去到某个页面的属性
// from 从哪个页面来的属性
// next 处理路由跳转及放行
router.beforeEach((to, from, next) => {
    // 启动进度条
    NProgress.start()
    // 设置头部
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = "devops_web"
    }
    //放行
    next()
})
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})